<template>
  <div v-if="currentData">
    <baiwan-dialog :visible="dialogVisible" :title="currentData.coinName+'充币'" :before-close="handleClose">
      <div class="charge-dialog">
        <div class="baiwan-dialog-cont">
          <p>如何充币？</p>
          <p>第一步，复制充币地址。</p>
          <p>第二步，打开钱包或交易所，将ETH转账到充币地址。</p>
          <p>第三步，返回ONEBET查看资产。</p>
        </div>
        <div class="baiwan-dialog-link">
          {{currentData.address}}
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <div class="baiwan-dialog-btn" @click="handleCopy">复制充币地址</div>
      </span>
    </baiwan-dialog>
  </div>
</template>

<script>
  import {Toast} from 'vant'
  import Dialog from '@/components/dialog'

  export default {
    name: 'charge-dialog',
    data() {
      return {
        dialogVisible: false,
        currentData: null
      }
    },
    components: {
      'baiwan-dialog': Dialog
    },
    props: ['visible', 'changeData'],
    watch: {
      visible: 'checkVisible'
    },
    methods: {
      checkVisible() {
        this.currentData = this.changeData
        this.dialogVisible = true
      },
      handleCopy() {
        let vm = this
        this.$copyText(this.currentData.address).then(function (e) {
          if (e.text) {
            Toast.success('复制成功')
            vm.currentData = null
            vm.dialogVisible = false
          }
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      },
      handleClose() {
        this.dialogVisible = false
      }
    },
    mounted() {
      this.currentData = this.changeData
      this.dialogVisible = this.visible
    }
  }
</script>

<style lang="less" scoped>
  .charge-dialog {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    .baiwan-dialog-cont {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      margin: 44px 0;
      > p {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: #FFFFFF;
        text-align: justify;
        line-height: 40px;
      }
    }

    .baiwan-dialog-link {
      width: 100%;
      height: auto;
      line-height: 40px;
      background: #0C1C3B;
      font-family: PingFangSC-Regular;
      font-size: 22px;
      color: #FFFFFF;
      text-align: center;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
  }

</style>
